import React, { Component } from "react";
import PropTypes from 'prop-types'


export default class Counter extends Component {

    static propType = {
        count: PropTypes.number.isRequired,
        increment: PropTypes.func.isRequired,
        decrement: PropTypes.func.isRequired
    }

    increment = () => {
        const number = this.select.value * 1
        // const count = this.state.count + number
        //调用store的方法更新状态
        this.props.increment(number)
        // this.props.store.dispatch(actions.increment(number))
    }
    decrement = () => {
        const number = this.select.value * 1
        //this.props.store.dispatch(actions.decrement(number))
        this.props.decrement(number)
    }

    incrementIfOdd = () => {
        const number = this.select.value * 1
        const { count } = this.props
        if (count % 2 === 1) {
            this.props.increment(number)
            //this.props.store.dispatch(actions.increment(number))
        }
    }
    incrementIfAsync = () => {
        const number = this.select.value * 1
        setTimeout(() => {
            // this.props.store.dispatch(actions.increment(number))
            this.props.increment(number)
        }, 1000);
    }
    render() {
        const { count } = this.props
        return (
            <div className="App">
                <p>click {count} times</p>
                <div>
                    <select name="" id="" ref={select => this.select = select}>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>&nbsp;
                    <button onClick={this.increment}>+</button>&nbsp;
                    <button onClick={this.decrement}>-</button>&nbsp;
                    <button onClick={this.incrementIfOdd}> increment if odd</button>&nbsp;
                    <button onClick={this.incrementIfAsync}>increment if async</button>&nbsp;
                </div>
            </div>
        );
    }
}